<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>绑定手机</title>
    <link rel="stylesheet" href="mui/css/mui.css">
    <script src="mui/js/mui.js"></script>
    <link rel="stylesheet" href="css/style.css?v1.1.1">
    <script src="js/jquery-1.11.3.js"></script>
    <style>
        body{background-color: white;}
    </style>
</head>
<body>
<div class="mui-content" style="background-color: white">
    <div class="mui-card phone-content">
        <div class="mui-card-header phone-title">填写手机号码和验证码</div>
        <div class="mui-card-footer phone-footer">请填写您的手机号码用于获取收据短信</div>
        <div class="mui-card-content">
            <div class="mui-card-content-inner phone-text">
                <div><input type="text" placeholder="输入手机号码" class="phone-input"></div>
                <div class="pub-border-top"><input type="text" placeholder="输入短信验证码" class="phone-input1"> <button class="verification">获取验证码</button></div>
                <div class="pub-border-top phone-submit"><input style="width: auto;padding: .6rem 2rem;" type="submit" onclick="window.location.href='user.html'" value="提交" class="phone-input1"></div>
            </div>
        </div>
    </div>
</div>
<script>
    $(".verification").click(function () {alert(111);
        let _this = $(this),
        step = 59;
        _this.attr("disabled", true);//设置disabled属性
        _this.addClass('verification_btn');
        _this.text('重新发送60');
        // 倒计时功能
        let _res = setInterval(function()
        {
            _this.text('重新发送'+step);
            step--;
            if(step <= 0){
                clearInterval(_res);//清除setInterval
                _this.removeClass('verification_btn');
                _this.removeAttr("disabled"); //移除disabled属性
                _this.text('获取验证码');
            }
        },1000);
    })
</script>
</body>
</html>